<template lang="pug"> 
div(id="h5-pump-info-search")
    el-card(class="card")
        div(slot="header")
            svg(aria-hidden="true",class="icon")
              use(xlink:href="#icon-qiapianguanli")
            span 胰岛素泵资料卡
            i(class="el-icon-loading" v-if="querying")
        div(class="info-body" flex="dir:top")
          div(flex-box="0")
            el-form(@submit.native.prevent)
                el-form-item
                  el-input(type="text",
                    placeholder="输入手机号或胰岛素泵号查询",
                    v-model="phoneOrPumpNo",
                    ref="conditionIpt"
                    clearable
                    @keyup.enter.native="getInfos")
          ul(flex-box="1",class="info-items readme",v-if=" status == 'form' ")
                li 
                    h3 使用说明
                li 1.输入电话号码或者胰岛素泵号
                li 2.按开始（回车）键进行查询

          div(v-for="info in infos",v-key="info.pumpNo", flex-box="1")
                ul(class="info-items")
                    li
                        div(class="f-left") 
                            svg(class="icon" aria-hidden="true")
                                use(xlink:href="#icon-kehu")
                            span {{info.customerName}}
                    li 
                        div(class="f-left")
                            svg(class="icon" aria-hidden="true")
                                use(xlink:href="#icon-dianhua")
                            span {{info.phone}}
                    li 
                        div(class="f-left")
                            svg(class="icon" aria-hidden="true")
                                use(xlink:href="#icon-zhuanshi")
                            span {{info.pumpBrandName}}
                        div(class="f-right") 品牌                                        
                    li 
                        div(class="f-left")
                            svg(class="icon" aria-hidden="true")
                                use(xlink:href="#icon-guigexinghao")
                            span {{info.pumpModelName}}
                        div(class="f-right") 型号                                        
                    li 
                        div(class="f-left")
                            svg(class="icon" aria-hidden="true")
                                use(xlink:href="#icon-dingdanxiangqing-bianhao")
                            span {{info.pumpNo}}
                        div(class="f-right") 胰岛素泵号                    
                    li 
                        div(class="f-left")
                            el-tooltip(effect="dark",content="有效期",placement="top-start")
                                svg(class="icon" aria-hidden="true")
                                    use(xlink:href="#icon-rili")
                            span {{info.warrantyStart | format('YYYY年MM月DD日')}}
                        div(class="f-right") 保修期开始
                    li 
                        div(class="f-left")
                            svg(class="icon" aria-hidden="true")
                                use(xlink:href="#icon-rili")
                            span {{info.warrantyEnd | format('YYYY年MM月DD日')}}
                        div(class="f-right") 保修期结束

          
          
          
          div(v-if="infos.length === 0 && status != 'form' " flex="main:center",style="min-height:200px;padding:0 40px",flex-box="1")
            svg(aria-hidden="true",class="icon-2")
              use(xlink:href="#icon-wushuju1")
          div(flex-box="0",style="height:45px;text-align:center;")
            a(href="tel:4008360592",style="color:#1989fa") 一键报修
</template>

<script>
/**胰岛素泵查询 公众号菜单H5 */
import "@/common/iconfont/iconfont.js";
import axios from "@/plugin/axios";
import dayjs from "dayjs";
import "flex.css";
export default {
  data() {
    return {
      infos: [],
      phoneOrPumpNo: "",
      status: "form", // 查询界面:form 查询中:searching 已查询:searched
      querying: false
    };
  },
  methods: {
    getInfos() {
      const phoneOrPumpNo = this.phoneOrPumpNo;
      this.querying = true;
      axios({
        method: "post",
        url: "PumpInfoSearch/doSearch",
        data: { phoneOrPumpNo }
      })
        .then(infos => this.getInfoSuccess(infos))
        .catch(() => this.getInfoSuccessFail());
    },
    getInfoSuccess(infos) {
      this.infos = infos;
      this.status = "searched";
      this.querying = false;
      this.$refs.conditionIpt.blur();
    },
    getInfoSuccessFail() {
      this.querying = false;
      this.$refs.conditionIpt.blur();
    }
  },
  filters: {
    format(val, format) {
      if (!val) return null;
      return dayjs(val).format(format);
    }
  },
  created() {
    var phoneOrPumpNo = this.$route.query.q;
    if (phoneOrPumpNo) {
      this.phoneOrPumpNo = phoneOrPumpNo;
      this.getInfos();
    }

    
  },
  mounted() {
    document.body.addEventListener("touchmove", e => e.preventDefault());

    this.$nextTick(function(){
      // 计算卡片高度
      const cardEl = document.querySelector('#h5-pump-info-search .el-card')
      const cardElHeader = document.querySelector('#h5-pump-info-search .el-card__header')
      const cardElBody = document.querySelector('#h5-pump-info-search .el-card__body')
      
      const bodyClientHeight = cardEl.clientHeight - cardElHeader.clientHeight
      cardElBody.style.height = bodyClientHeight + 'px'
      console.log(cardElBody[0])
      console.log(cardElBody.clientHeight , bodyClientHeight)

    }.bind(this))
  }
};
</script>

<style lang="scss">
* {
  box-sizing: border-box;
}
body {
  background: -webkit-radial-gradient(
      0% 100%,
      ellipse cover,
      rgba(35, 24, 82, 0.22) 10%,
      rgba(138, 114, 76, 0) 40%
    ),
    linear-gradient(
      to bottom,
      rgba(57, 173, 219, 0.25) 0%,
      rgba(42, 60, 87, 0.4) 100%
    ),
    linear-gradient(135deg, #670d10 0%, #092756 100%);
}

#h5-pump-info-search {
  // margin: 20px;
  height: 100vh;
  padding: 35px;
  .card {
    justify-content: center;
    min-height: 100%;
  }

  .info-body {
    display: flex;
    height: 100%;
  }
  .info-items {
    list-style: none;
    font-size: 14px;
    font-family: "Microsoft YaHei", "黑体", "宋体", sans-serif;
    margin: 0;
    padding: 0;
  }
  .info-items li {
    padding: 8px 0 5px 0;
    border-bottom: #f5f5f5 1px solid;
    display: flex;
  }
  .info-items li .f-left {
    flex: 3;
  }
  .info-items li .f-right {
    flex: 1;
    text-align: right;
    font-size: 12px;
    color: #666;
  }

  .readme {
    font-family: Georgia, "Times New Roman", Times, serif;
  }
  .icon {
    width: 1.5em;
    height: 1.5em;
    vertical-align: -0.4em;
    fill: currentColor;
    overflow: hidden;
    margin-right: 10px;
  }
  .icon-empty {
    width: 80%;
    height: 80%;
    vertical-align: -0.4em;
    fill: currentColor;
    overflow: hidden;
    margin-right: 10px;
  }
}
</style>